import React from 'react'
import {Card, Progress} from "reactstrap";
import {percentage} from '../../../../helpers/utils'

const Sex = React.memo(props => {
  let sum = props.sex.reduce((acc, item) =>  acc + item.count, 0)
  const progressColor = ["primary", "danger", "warning"]

  return (
    <Card className={`analytics-card ${props.bgColor}`}>
      <div className="analytics-card__header">
        <div className="analytics-card__title">Пол</div>
      </div>
      <div className="analytics-card__content analytics-card__content-small">
        <div className="sex-card__content">
          {
            props.sex.map((item, index) => {
              return (
                <div className="sex-card__item" key={index}>
                  <div className="d-flex justify-content-between mb-25">
                    <div className="analytics-card__info">
                      <span className="mb-25">{item.name}</span>
                    </div>
                    <div className="stastics-info text-right">
                      <span className="text-muted d-block">{`${percentage(item.count, sum)}%`}</span>
                    </div>
                  </div>
                  <Progress
                    className="mb-2 big-progress-analytics"
                    color={progressColor[index]}
                    value={percentage(item.count, sum)}
                  />
                </div>
              )
            })
          }
        </div>
      </div>
    </Card>
  )
})

export default Sex
